Example 1: push the last element to end of flex container
margin-left: auto on the last grid itemExample 2: push 2 last elements to end of flex container
margin-left: auto on the first grid item that we want to pushmargin-right: auto on the first element.Example 1: Make element grow with window size
flex: 1flex: 1 is a shorthand for flex-shrink, flex-grow and flex-basis.Example 2: Flex vs fixed width
width percentage = 1/ num of child elements, every time we add new child, but we don’t need to change anything if we use flexExample 3: Make some flex child flexing, and the rest fixed width
flex: 1.Example 4: Make only 1 child element 2x flex, and others 1x flex
.container > div { flex: 1}. We select using .container div {} to specifically select all div elements that are under .container class only. .container > .search { flex: 2}. We need to use specific selector here, if we do .search {} it wont work because it has lower specificity than .container > div {} so it will not override that statement..container > div { flex: 1} and only do .container > .search { flex: 2}, then only .search child will flex, the others will have the same width. And in such cases, it doesn't matter if we do flex: 1 or flex: 2 for the .search, because it will be only 1 element that is flexing anyway.height: 100% then we can see that the flex items will stretch themselves as we stretch the window size.height: 100% will only work because we have set height: 100% in html and body.height: 100% wouldn't have any effect at all.height: 100% to the flex container, html and body.align-items: stretch.Example of flex-start
Example of aligning individual flex item
align-self.flex-direction: row..logout item to the start of the cross-axis; and we align the .home item to the end of the cross-axis.height: 100% of a flex container, then it will only consume height it needs to display its content, so even if we do justify-content: flex-end, it will not have any effect. height: 100%, we also need to set height: 100% to html and body or else it the html and body will only take up as much height as the what the flex container needs, so it won't make any difference.Example to position items to bottom right corner
flex-wrap: nowrap;.Example 1: By default flex container shrink down children to fit inside the container
flex-wrap: nowrap, so it will force all of its children on a single row or column depending on the flex-direction we set.Example 2: `flex-wrap: wrap` will push children to next row or column
flex is a shorthand property of flex-grow, flex-shrink and flex-basis.flex: 1 is a shorthand for flex: 1 1 0 which is also equivalent to:flex-grow: 1flex-shrink: 1flex-basis: 0flex is flex-grow, the second value is flex-shrink and the third value is flex-basis.Example 1: container width is bigger than total width of its children
Example 2: container width is lesser than total width of its children
flex-grow: 0 is the default value.Example 1: container width is bigger than the total width of its children
flex-grow property.flex-grow property works in relation to each other, eg when all of flex children has flex-grow: 1, then extra space will be distributed to each of them equally.Example 2: element with `flex-grow: 0` will not "grow" in width when there are extra space available
flex-basis).flex-shrink: 1 is the default value.Example 1: Setting all children to have `flex-shrink: 1` will force them to shrink equally when container width is less than total base width of its children
Example 2: Setting `flex-shrink: 0` to an element makes it not shrinking at all
Example 3: Higher `flex-shrink` value will make that element shrink at faster rate relative to the other elements
order: 0.order above 0 will move towards the right, and making it below 0 will move it towards the left.Example 1: By default, all flex items has `order: 0`
Example 2: Setting `order` to be above 0 moves it towards the end of the container along the main axis
order: 1 or order: 5, as long as the value is above 0 (as long as its order is higher than the rest of flex items), then it will give the same result as below.Example 3: Reversing the order of the flex elements